<template>
    <div class="gray">
        <search></search>
        <form action="/" class="from">
            <van-search
                v-model.trim="value"
                show-action
                placeholder="商品搜索"
                @input="onSearch"
                @cancel="onCancel"
            />
        </form>
        <div v-if="isShow == 'search'">
            <ul class="search">
                <li v-for="item in searchList" :key="item.id" @click="adddata(item.name)">{{item.name}}</li>
            </ul>
            <p v-if="Show" class="commodity">数据库暂无此类商品...</p>
        </div>
        <div v-if="isShow == 'true'" id="true">
            <!-- <div class="sortnav">
                <p>综合</p>
                <p>价格</p>
                <p>分类</p>
            </div> -->
            <div class="sortnav">
                <p :class="red == 'default' ? 'active' : ''"  @click="defu">综合</p>
                <div class="price">
                    <p :class="red == 'price' ? 'active' : ''" @click="price">价格</p>
                    <div class="chui">
                        <van-icon name="arrow-up" :class="current == 'up' ? 'active' : '' "/>
                        <van-icon name="arrow-down"  :class="current == 'down' ? 'active' : ''" />
                    </div>
                </div>
                <p :class="red == 'category' ? 'active' : ''" @click="category">分类</p>
            </div>

            <ul>
                <li v-for="item in keywordsList" :key="item.id">
                    <img :src="item.list_pic_url" width="151" height="151">
                    <p>{{item.name}}</p>
                    <p>￥{{item.retail_price}}</p>
                </li>
            </ul>
        </div>
        <div class="default" v-if="isShow == 'default'">
            <div class="history" v-if="historyData" v-show="historyData[0]">
                <div class="between">
                    <p>历史记录</p>
                    <p @click="clear"><van-icon name="delete-o" size="18"/></p>
                </div>
                <div class="cont">
                    <p v-for="(item,index) in historyData" :key="index" @click="adddata(item.keyword)">{{item.keyword}}</p>
                </div>
            </div>
            <div class="hot">
                <p>热门搜索</p>
                <div class="cont">
                    <p v-for="(item,index) in hotKeywordList" :key="index"  @click="adddata(item.keyword)">{{item.keyword}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import search from "@/components/search"
import { indexaction, helperaction, addhistoryaction, clearhistoryAction } from "@/api/home/search/index.js"
export default {
    data() {
        return {
            value: '',
            isShow:'default',
            hotKeywordList:[],
            historyData:[],
            searchList:[],
            keywordsList:[],
            red:'default',
            current:"default",
            Show:false
        };
    },
    computed: {

    },
    created() {
        this.init();
    },
    mounted() {

    },
    watch:{
        // isShow(){
        //     if(this.isShow == "default"){
        //         indexaction({
        //             openId: localStorage.getItem("openId"),
        //         }).then(res=>{
        //             this.historyData = res.data.historyData
        //         })
        //     }
        // }
    },
    methods: {
        defu(){
            this.red = 'default';
            this.current = 'default';
            this.init();
        },
        price(){
            this.red = 'price';
            if(this.current == 'up'){
                this.current = 'down';
                this.order = 'desc';
                this.init();
            }else{
                this.current = 'up';
                this.order = 'asc';
                this.init();
            }
        },
        category(){
            this.red = 'category';
            this.current = 'default';
            this.init();
        },

        clear(){
            clearhistoryAction({
                openId:localStorage.getItem("openId")
            }).then(res=>{
                this.historyData = res.data.historyData
            })
        },
        adddata(value){
                helperaction({
                    keyword:value,
                    order:""
                }).then(res=>{
                    this.keywordsList = res.data.keywords;
                    if(this.keywordsList.length == 0){
                        this.isShow = 'default'
                        this.init();
                    }else{
                        this.isShow = 'true'
                        addhistoryaction({
                            keyword:value,
                            openId:localStorage.getItem("openId")
                        }).then(res=>{
                            this.init();
                        })
                    }
                })            
        },
     
        onSearch() {
            if(this.value){
                this.isShow = 'search'
            }else{
                this.isShow = 'default'
            }
            helperaction({
                keyword:this.value,
                order:""
            }).then(res=>{
                this.searchList = res.data.keywords
                console.log(this.searchList.length);
                if(this.searchList.length == 0){
                    this.Show = true;
                }
            })
        },
        onCancel() {
            this.$router.go(-1)
        },
        init(){
            indexaction({
                openId:localStorage.getItem("openId")
            }).then(res=>{
                // console.log(res);
                this.hotKeywordList = res.data.hotKeywordList;
                this.historyData = res.data.historyData
            })
        }
    },
    components:{
        search
    }
};
</script>

<style scoped lang="scss">
    .from{
        margin-top:3px;
    }
    .hot{
        margin-top:10px;
        padding: 16px;
        background-color: #fff;
        p{
            text-align: left;
            margin: 0;
            margin-bottom: 15px;
        }
        .cont{
            display: flex;
            flex-wrap:wrap ;
            p{
                padding: .13333rem .13333rem;
                border: .01333rem solid #999;
                margin: 0 .4rem .26667rem 0;
            }
            p:first-child{
                border:.01333rem solid #b4282d;
                color: #b4282d;
            }
            
        }
    }
    .gray{
        background-color: rgb(244,244,244);
    }
    .history{
        padding: 16px;
        background-color: #fff;
        .between{
            display: flex;
            justify-content: space-between;
            margin-bottom:15px;
            p{
                margin: 0;
            }
        }
        .cont{
            display: flex;
            flex-wrap:wrap ;
            p{
                padding: .13333rem .13333rem;
                border: .01333rem solid #999;
                margin: 0 .4rem .26667rem 0;
            } 
        }
    }
    .commodity{
        margin: 0;
        text-align: center;
        padding-top: 4rem;
        background-color: #fff;
    }
    .search{
        padding: 0 16px;
        background-color: #fff;
        li{
            text-align: left;
            padding: 10px 0;
        }
    }
    #true{
        // .sortnav{
        //     display: flex;
        //     align-items: center;
        //     background-color: #fff;
        //     border-bottom: .01333rem solid #d9d9d9;
        //     p{
        //         width: 33%;
        //         text-align: center;
        //     }
        // }
        .sortnav{
            display: flex;
            align-items: center;
            background-color: #fff;
            p{
                width: 33%;
                text-align: center;
            }
            .price{
                width: 33%;
                display: flex;
                justify-content: center;
                align-items: center;
                p{
                    margin: 0;
                } 
                .chui{
                    display: flex;
                    flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        i{
                            width: 10px;
                            height: 10px;
                        }
                }
            }
        }

        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 1px;
            li{
                width: 49.5%;
                margin-bottom:1% ;
                background-color: #fff;
                border-right: 1Px solid #d9d9d9;
                p:last-child{
                    font-size: .4rem;
                    color: #b4282d;
                }
            }
        }
    }
    .active{
        color: #b4282d;
    }
</style>
